<template>
  <p class="font-bold mb-1 text-neutral-600">更多媒体，低价加量</p>
  <p class="mb-2">
    <span class="text-neutral-400">请选择需要的媒体及其平台*时段*时长</span>
  </p>
  <!--  <a-card
    class="card select-none"
    :class="{ 'not-effect': true, 'card-select': select }"
    @click="emit('on-click')"
  >-->
  <a-card class="card select-none" :class="{ 'not-effect': true, 'card-select': select }">
    <corner-mark v-show="select">已选择</corner-mark>
    <div class="flex justify-between items-center">
      <p class="title main-title mb-0">更多媒体，低价加量</p>
      <bw360-intro>
        <question-circle-outlined class="red cursor-pointer" />
      </bw360-intro>
    </div>
    <h3 class="big-1 mb-0">360标王（敬请期待）</h3>
    <div class="flex flex-wrap" v-if="!showOnly">
      <div class="w-1/2 mb-2">
        <p class="title mb-0">原价：{{ zeroFormat(priceUtils.current360OriginPrice.value) }}元</p>
        <h3 class="big-2 mb-0 red">抢鲜价：{{ zeroFormat(priceUtils.current360Price.value) }}元</h3>
      </div>
      <div class="w-1/2 mb-2">
        <p class="title mb-0">投放时长</p>
        <h3 class="big-2 mb-0 black">{{ priceUtils.current360PriceData.value.timer || '--' }}</h3>
      </div>
      <div class="w-1/2">
        <p class="title mb-0">投放平台</p>
        <h3 class="big-2 mb-0 black">
          {{ PricePlatformKeyMap[priceUtils.current360PriceData.value.columnName] || '--' }}
        </h3>
      </div>
      <div class="w-1/2">
        <p class="title mb-0">投放时间端</p>
        <h3 class="big-2 mb-0 black">{{ priceUtils.current360PriceData.value.quote || '--' }}</h3>
      </div>
    </div>
    <template #actions v-if="!showOnly">
      <!--      <div class="black font-bold" @click.stop="emit('on-btn-click')">更换套餐</div>-->
      <div class="red font-bold select-none hover-red">
        <span v-if="select">已选择</span>
        <!--        <span v-else>点击选择</span>-->
        <span v-else>敬请期待</span>
      </div>
    </template>
  </a-card>
</template>

<script lang="ts" setup>
import { QuestionCircleOutlined } from '@ant-design/icons-vue'
import Bw360Intro from './Bw360Intro.vue'
import CornerMark from '@/components/corner-mark/index.vue'
import { PricePlatformKeyMap } from '@/core/mapper/platform'
import { usePriceTable } from '@/views/price-sheet/hooks/usePriceTable'

interface Props {
  showOnly?: boolean
  select: boolean
  priceUtils: ReturnType<typeof usePriceTable>
}

interface Emits {
  (e: 'on-click'): void
  (e: 'on-btn-click'): void
}

withDefaults(defineProps<Props>(), {
  showOnly: false,
  data: () => ({}),
  select: false
})

defineEmits<Emits>()

function zeroFormat(num: string | number) {
  return Number(num) === 0 ? '--' : num
}
</script>

<script lang="ts">
export default {
  name: 'Bw360Card'
}
</script>

<style lang="scss" scoped>
.card {
  position: relative;
  min-width: 310px;
  max-width: 335px;
  border: 1.5px solid #ffd0d0;
  transition: all 0.2s ease;

  ::v-deep(.ant-card-body) {
    padding: 15px;
  }

  ::v-deep(.ant-card-actions) {
    transition: all 0.2s ease;
    border-top: 1.5px solid #ffd0d0;
  }

  ::v-deep(.ant-card-actions > li:not(:last-child)) {
    border-right: 1.5px solid #ffd0d0;
  }

  .title {
    font-weight: bold;
    font-size: 12px;
    color: rgb(165 165 165);
  }

  .main-title {
    color: rgb(183 87 87);
    font-size: 13px;
  }

  .big-1 {
    font-size: 30px;
    font-weight: bold;
    color: #ff6350;
  }

  .big-2 {
    font-size: 15px;
    font-weight: bold;
  }

  .red {
    color: #ff6350;
  }

  .black {
    color: #666;
  }
}

.card-select {
  background: #ff4d4f;

  .title {
    color: #fff;
  }

  .main-title {
    color: #fff;
  }

  .big-1 {
    color: #fff;
  }

  .red {
    color: #fff;
  }

  .black {
    color: #fff;
  }

  .hover-red {
    &:hover {
      color: #fff;
    }
  }

  ::v-deep(.ant-card-actions) {
    background: #ff4d4f;
  }
}

.not-effect {
  filter: grayscale(100%);
}

.hover-red {
  &:hover {
    color: red;
  }
}
</style>
